<template>
	<a-space class="select-group">
		<a-select v-model="state.province.code" placeholder="省">
			<a-option v-for="item in provinceList" :value="item.code">{{item.name}}</a-option>
		</a-select>
		<a-select v-model="state.city.code" v-if="!specialCodes.includes(state.province.code)" placeholder="市">
			<a-option v-for="item in cityList" :value="item.code">{{item.name}}</a-option>
		</a-select>
		<a-select v-model="state.area.code" placeholder="区">
			<a-option v-for="item in countyList" :value="item.code">{{item.name}}</a-option>
		</a-select>
	</a-space>
</template>

<script lang='ts' setup>
import type { CodeAndName } from '@/api/Common/types';
import { areaList } from '@vant/area-data';
import { onBeforeMount,computed,reactive,watch } from "vue";
const props=defineProps<{
	modelValue:{
		province:{
			code:string,
			name:string
		},
		city:{
			code:string,
			name:string
		},
		area:{
			code:string,
			name:string
		},
	},
}>()

const emits = defineEmits(["update:modelValue"]);

let state=reactive({
	province:{
		code:"",
		name:""
	},
	city:{
		code:"",
		name:""
	},
	area:{
		code:"",
		name:""
	},
})
let isMounted=false

onBeforeMount(()=>{
	if(props.modelValue){
		state.province=props.modelValue.province
		state.city=props.modelValue.city
		state.area=props.modelValue.area
	}
	setTimeout(() => {
		isMounted=true
	}, 100);
})

let specialCodes=["110000","120000","310000","500000"]
watch(()=>state.province.code,()=>{
	if(specialCodes.includes(state.province.code)){
		let pStartCode=state.province.code.substring(0, 2)
		for (const key in areaList.city_list) {
			const name = areaList.city_list[key];
			if(key.startsWith(pStartCode)){
				state.city={
					code:key,
					name:name
				}
			}
		}

	}else if(isMounted){
		state.city={
			code:"",
			name:""
		}
	}
	state.province.name=areaList.province_list[state.province.code]
	emits("update:modelValue", state);
})
watch(()=>state.city.code,()=>{
	if(isMounted){
		state.area={
			code:"",
			name:""
		}
	}

	state.city.name=areaList.city_list[state.city.code]
	emits("update:modelValue", state);
})
watch(()=>state.area.code,()=>{
	state.area.name=areaList.county_list[state.area.code]
	emits("update:modelValue", state);
})

let provinceList=computed(()=>{
	let list:CodeAndName[]=[]
	for (const key in areaList.province_list) {
		const name = areaList.province_list[key];
		list.push({
			code:key,
			name:name
		})
	}
	return list
})
let cityList=computed(()=>{
	let pStartCode=state.province.code.substring(0, 2)
	if(!pStartCode)return []
	let list:CodeAndName[]=[]
	for (const key in areaList.city_list) {
		const name = areaList.city_list[key];
		if(key.startsWith(pStartCode)){
			list.push({
				code:key,
				name:name
			})
		}
	}
	return list
})
let countyList=computed(()=>{
	let pStartCode=state.city.code.substring(0, 4)
	if(!pStartCode)return []
	let list:CodeAndName[]=[]
	for (const key in areaList.county_list) {
		const name = areaList.county_list[key];
		if(key.startsWith(pStartCode)){
			list.push({
				code:key,
				name:name
			})
		}
	}
	return list
})
</script>
<style scoped lang='scss'>
.select-group{
	width: 100%;
	:deep(.arco-space-item){
		flex:1
	}
}
</style>
